<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="./jianli2.js"></script>
    <link rel="stylesheet" href="./lianjie.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div id="col1" class="bg">
    <div class="bt">
        <h1 class="a">Belong to me</h1>
    </div>
    <div class="sou">
        <form class="sou1" action="http://www.baidu.com/baidu" target="_blank">

            <table ><tr><td>

                <input name=tn type=hidden value=baidu>

                <input class="sou2" type=text name=word size=30>
                <button class="btn">点</button>
            </td></tr></table>

        </form>

    </div>
    <div class="co">
        <div class="roww">
            <div class="cola">
                <div class="img1">
                    <a href="https://cart.taobao.com/cart.htm?spm=a21bo.7724922.1997525049.1.ynCs8I&from=mini&pm_id=1501036000a02c5c3739" target="view_window">
                        <div class="hehe">

                            <p class="ha">淘宝购物车</p>

                        </div>
                    </a>
                </div>
            </div>
            <div class="cola1">
                <div class="img2">
                    <a href="http://tieba.baidu.com/f?kw=欧美头像&ie=utf-8" target="view_window">
                        <div class="hehe1">

                            <p class="ha">欧美头像</p>

                        </div>
                    </a>
                </div>
            </div>
            <div class="cola2">
                <div class="img3">
                    <a href="http://zh.learnlayout.com/box-sizing.html" target="view_window">
                        <div class="hehe2">

                            <p class="ha">css布局</p>

                        </div>
                    </a>
                </div>
            </div>
            <div class="cola3">
                <div class="img4">
                    <a href="http://tieba.baidu.com/f?kw=ÃÀ¹ú¹Ö̷&fr=ala0&tpl=5" target="view_window">
                        <div class="hehe3">

                            <p class="ha">美国怪谭吧</p>

                        </div>
                    </a>
                </div>
            </div>
            <div class="cola4">
                <div class="img5">
                    <a href="http://www.bootcss.com/" target="view_window">
                        <div class="hehe4">

                            <p class="ha">Bootstrap中文网</p>

                        </div>
                    </a>
                </div>
            </div>
            <div class="cola5">
                <div class="img6">
                    <a href="http://www.runoob.com/" target="view_window">
                        <div class="hehe5">

                            <p class="ha">菜鸟教程</p>

                        </div>
                    </a>
                </div>
            </div>
            <div class="cola6">
                <div class="img7">
                    <a href="http://www.easyicon.net/" target="view_window">
                        <div class="hehe6">

                            <p class="ha">图标</p>

                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>


</div>
</body>
<script>

    total = document.documentElement.clientHeight;
    colHeight = total-document.getElementById("col1").offsetTop;
    document.getElementById("col1").style.height=colHeight+"px";

    $(document).ready(function(){
        $(".cola3").mouseleave(function(){
            $(".hehe3").fadeOut("fast");
        });
        $(".cola3").mouseenter(function(){
            $(".hehe3").slideDown("slow");
        });
        $(".cola2").mouseleave(function(){
            $(".hehe2").fadeOut("fast");
        });
        $(".cola2").mouseenter(function(){
            $(".hehe2").slideDown("slow");
        });
        $(".cola1").mouseleave(function(){
            $(".hehe1").fadeOut("fast");
        });
        $(".cola1").mouseenter(function(){
            $(".hehe1").slideDown("slow");
        });
        $(".cola").mouseleave(function(){
            $(".hehe").fadeOut("fast");
        });
        $(".cola").mouseenter(function(){
            $(".hehe").slideDown("slow");
        });


    });
</script>
</html>